<template>
  <div>
    <TopIndexNav></TopIndexNav>
    <!-- tab栏组件 -->

    <div class="postcontent">
      <van-tabs v-model="activeTab" sticky swipeable>
        <router-link to="/tabmag">
          <span class="iconfont iconjiantou"></span>
        </router-link>
        <van-tab v-for="(tabItem, index) in tabList" :key="index" :title="tabItem.name">
          <van-list
            v-model="tabItem.loading"
            :finished="tabItem.finished"
            finished-text="没有更多了"
            @load="LoadMorePost"
            :immediate-check="false"
          >
            <!-- 这里是文章列表组件 -->
            <IndexPost :post="post" v-for="(post,index) in tabItem.posts" :key="index"></IndexPost>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 测试数据 -->
    <!-- <button @click=" testposts">test按钮</button> -->
  </div>
</template>
<script>
// 导入首页搜索框组件
import TopIndexNav from "@/components/TopIndexNav.vue";
import IndexPost from "@/components/IndexPost.vue";
export default {
  components: {
    TopIndexNav,
    IndexPost
  },
  data() {
    return {
      tabList: [],
      activeTab: 1
    };
  },
  watch: {
    activeTab(newVal) {
      //   tab栏目一切换，activeTab双向数据绑定就会将对应tab的索引值存入data中的activeTab
      const activeCategory = this.tabList[this.activeTab];
      // 判断当前栏目的文章列表posts的长度，如果为0，则代表没有加载过该栏目的数据，需要进行加载
      if (activeCategory.posts.length == 0) {
        //获取当前栏目分类的文章
        this.getTabPosts();
      }
    }
  },
  mounted() {
    // 页面一加载完成就渲染栏目数据
    this.getCategory();
  },
  methods: {
    // 初始化data
    initCategoryData(data) {
      // 遍历data;
      data.forEach(element => {
        //给每一栏目加上posts属性
        element.posts = [];
        //给每一个栏目加上pageIndex
        element.pageIndex = 1;
        // 给每一个栏目加上pageSize = 5;
        element.pageSize = 5;
        // 给每个栏目加上加载状态的变量 loading 和 finished
        element.loading = false;
        element.finished = false;
      });
      //将data返回出去
      return data;
    },
    getCategory() {
      // 先判断本地是否有栏目的数据，如果有就从本地拿数据
      if (localStorage.getItem("dellist")) {
        const data = JSON.parse(localStorage.getItem("dellist"));
        const newdata = this.initCategoryData(data);
        this.tabList = newdata;
      } else {
        //本地没有数据
        this.$axios({
          url: "/category",
          method: "get"
        }).then(res => {
          console.log(res);
          const { data } = res.data;

          //给栏目分类的每一项下面都加上posts属性
          const newdata = this.initCategoryData(data);
          this.tabList = newdata;
          //页面一加载就获取当前激活的的栏目的文章
          this.getTabPosts();
        });
      }
    },
    getTabPosts() {
      const activeCategory = this.tabList[this.activeTab];
      this.$axios({
        url: "/post",
        method: "get",
        params: {
          category: activeCategory.id,
          pageIndex: activeCategory.pageIndex,
          pageSize: activeCategory.pageSize
        }
      }).then(res => {
        console.log("文章数据", res);
        const { data } = res.data;
        // 判断data.cover.url是否带有基准路径，如果没有给它加上
        data.forEach(element => {
          for (var key in element.cover) {
            if (element.cover[key].url.indexOf("http") < 0) {
              element.cover[key].url =
                this.$axios.defaults.baseURL + element.cover[key].url;
            }
          }
        });

        //将获取到的文章列表添加到对应栏目下面的posts
        activeCategory.posts = [...activeCategory.posts, ...data];
        //ajax数据获取完毕，手动将loading变成false
        activeCategory.loading = false;
        // 当获取到的页面数据的长度小于pageSize,说明已经到底了，数据库中已经没有更多的数据了，所以停止加载数据,将栏目中的控制到底的属性finished为true;
        if (data.length < activeCategory.pageSize) {
          activeCategory.finished = true;
        }
      });
    },
    //加载处理函数
    LoadMorePost() {
      //将当前的tab的页码+1,发送ajax请求获取数据
      const activeCategory = this.tabList[this.activeTab];
      activeCategory.pageIndex++;
      //发送ajax请求
      //模拟加载的状况
      setTimeout(() => {
        this.getTabPosts();
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-tab__text {
  font-size: 16px;
}
/deep/ .van-tabs__nav {
  margin-right: 11.111vw;
}
/deep/ .van-tabs {
  position: relative;
  .iconjiantou {
    position: absolute;
    right: 0;
    top: 0;
    width: 11.667vw;
    height: 11.667vw;
    line-height: 11.944vw;
    text-align: center;
    font-size: 22px;
    color: #333;
    transform: rotateZ(-90deg);
    background-color: #fff;
    box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.1);
  }
}
.postcontent {
  margin-bottom: 22.222vw;
}
</style>
